<template setup>
    <div class="simple">
        <div class="title">
            <span>
                储能管理系统
            </span>
        </div>
        <div class="login">
            <div>
                <el-tag class="eltag">用户名：</el-tag>
                <el-input class="inputel" placeholder="请输入用户名" v-model="user"></el-input>
            </div>
            <div>
                <el-tag class="eltag">密码：</el-tag>
                <el-input class="inputel" placeholder="请输入密码" v-model="pass" show-password></el-input>
            </div>
            <div>
                <el-button class="elbutton" type="primary" @click="handleClick">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const user = ref()
const pass = ref()
const handleClick = () => {
    if (user.value === 'admin' && pass.value === '123') {
        alert('登录成功')
        router.push('/')
    } else {
        alert('用户名或密码错误')
    }
}

</script>

<style scoped>
.title {
    padding-top: 50px;
    height: 20vh;

    font-size: 50px;
    text-align: center;
    background-color: rgba(158, 211, 198, 0.5);


}

.login {
    margin-top: 30vh;
    padding-left: 50vh;
    height: 35vh;
    background-color: rgba(40, 58, 53, 0.5);
    text-align: center;
    font-size: 30px;
    display: block;
    justify-content: center;
    align-items: center;
    padding-top: 10vh;
}

.simple {
    height: 100vh;
    display: block;
    justify-content: center;
    align-items: center;
    background-image: url("../img/login.png");
    background-size: cover;
}

.inputel {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    width: 200px;
    height: 40px;
    border-radius: 10px;
    padding-left: 20px;
    font-size: 20px;
    outline: none;
    border: none;
    box-sizing: border-box;
    transition: all 0.3s;
}

.eltag {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 40px;
    padding: 5px;
    background-color: lightgray;
    border-radius: 6px;
    display: inline-block;
}

.elbutton {
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: 10px;
    width: 100px;
    height: 40px;
    padding: 5px;
    border-radius: 2px;
    display: inline-block;
}
</style>